<template>
	<div class="padding-across-10" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
		<div style="width: 100%;padding-bottom: 3px">
			<headerOpreate style="width: 300px;float: left" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
			<div class="block" style="text-align:right;float: right;padding-bottom:2px">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
				</el-pagination>
			</div>
		</div>

		<el-table border style="width: 100%;" :data="tableData" @selection-change="handleSelectionChange">
			<el-table-column type="selection" align="center" width="50px"></el-table-column>
			<el-table-column label="名称" align="center" prop="Name"></el-table-column>
			<el-table-column label="创建时间" align="center" prop="CreateTime"></el-table-column>
			<el-table-column label="创建人" align="center" prop="CreateUid"></el-table-column>
			<el-table-column label="更新时间" align="center" prop="UpdateTime"></el-table-column>
			<!-- <el-table-column label="操作人" align="center" prop="UpdateUid"></el-table-column> -->
		</el-table>
		<div class="block" style="text-align:right;margin-bottom:60px;padding-top: 1px">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
			</el-pagination>
		</div>

		<!-- 弹窗-- 馆藏地列表 -->
		<el-dialog title="读者未绑定馆藏地列表" v-model="locationDialog" :show-close="false" :class="[dialog-large-width]">
			<el-table border style="width: 100%;" :data="unBindTableData" @selection-change="handleUnBindSelectionChange">
				<el-table-column type="selection" align="center" width="50px"></el-table-column>
				<el-table-column label="名称" align="center" prop="Name"></el-table-column>
				<el-table-column label="创建时间" align="center" prop="CreateTime"></el-table-column>
				<el-table-column label="创建人" align="center" prop="CreateUid"></el-table-column>
				<el-table-column label="更新时间" align="center" prop="UpdateTime"></el-table-column>
				<!-- <el-table-column label="操作人" align="center" prop="UpdateUid"></el-table-column> -->
			</el-table>
			<div class="block" style="text-align:right;padding-top: 1px">
				<el-pagination @size-change="handleSizeUnBindChange" @current-change="handleUnBindCurrentChange" :current-page="unBindCurrentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="unBindPageSize" layout="total, sizes, prev, pager, next, jumper" :total="unBindTotalSize">
				</el-pagination>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="locationDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmBindLocation">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	let id = 1000;
	export default {
		components: {
			headerOpreate
		},
		data() {
			return {
				isReload: false,
				loading: false,
				tableData: [],
				unBindTableData: [],
				locationDialog: false,
				multipleSelection: [],
				unBindMultipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				unBindCurrentPage: 1,
				unBindPageSize: 10,
				unBindTotalSize: 0,
				opreateDatas: [{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: this.$t("message.refresh"),
					action: 'reloadDatas'
				},
				{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-plus el-icon--left',
					name: '添加',
					action: 'bindLocation'
				},
				{
					show: GloabFun.getUid() == 'admin' ? true : false,
					type: 'danger',
					size: 'small',
					icon: "el-icon-delete2 el-icon--left",
					name: "删除",
					action: "multipleDeleteBind"
				}
				],
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getDatas();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getDatas();
			},
			//选择已绑定的馆藏地
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			//获取读者未绑定馆藏地信息
			getUnBindLocationInfo() {
				var param = {
					readerkeyid: this.templateObj.keyid,
					flag: 2,
					index: this.unBindCurrentPage,
					pagesize: this.unBindPageSize
				}
				HttpServer.httpPost.call(this, '/Api/LibraryLocation/locationByReader', param, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.formateData(response.data.info);
						this.unBindTableData = response.data.info;
						this.unBindTotalSize = response.data.total;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			//绑定
			bindLocation() {
				this.locationDialog = true;
				this.getUnBindLocationInfo();
			},
			//选择未绑定馆藏地
			handleUnBindSelectionChange(val) {
				this.unBindMultipleSelection = val;
			},
			//切换页面
			handleUnBindCurrentChange(val) {
				this.unBindCurrentPage = val;
				this.getUnBindLocationInfo();
			},
			handleSizeUnBindChange(val) {
				this.unBindPageSize = val;
				this.getUnBindLocationInfo();
			},
			//选择绑定的数据处理
			formationUnBindSelection() {
				var result = [],
				array = this.unBindMultipleSelection;
				for(var i = 0; i < array.length; i++) {
					result[i] = {};
					result[i].locationkeyId = array[i].LocationKeyId;
					result[i].readerkeyid = this.templateObj.keyid;
				}
				return result;
			},
			//确认绑定
			confirmBindLocation() {
				if(this.formationUnBindSelection().length > 0) {
					this.$confirm('此操作将所选馆藏地与该读者进行绑定，是否继续？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						HttpServer.httpPost.call(this, '/Api/LibraryLocation/BindReader', {
							info: this.formationUnBindSelection(),
							UserId: parseInt(GloabFun.getKeyId())
						}, function(response) {}, function(response) {
							this.getUnBindLocationInfo();
							if(response.data.code === 0) {
								this.getDatas();
								this.$notify({
									title: '成功',
									message: this.$t('message.saveSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						})
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.operationCanceled'),
							duration: 2500
						})
					});
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: this.$t('message.selectBulkAddWarning'),
						type: 'warning',
						duration: 2500
					});
				}
			},

			//选择已绑定的馆藏地
			formateSelection() {
				var result = [],
				array = this.multipleSelection;
				for(var i = 0; i < array.length; i++) {
					result[i] = {};
					result[i].locationKeyId = array[i].LocationKeyId;
					result[i].readerkeyid = this.templateObj.keyid;
				}
				return result;
			},
			//批量解除绑定
			multipleDeleteBind() {
				if(this.formateSelection().length > 0) {
					this.$confirm('此操作将删除所选已绑定的馆藏地，是否继续？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						HttpServer.httpPost.call(this, '/Api/LibraryLocation/UnBindReader', {
							info: this.formateSelection()
						}, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.getDatas();
								this.$notify({
									title: '成功',
									message: this.$t('message.deleteSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						})
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.operationCanceled'),
							duration: 2500
						})
					})
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: this.$t('message.selectBulkDeleteWarning'),
						type: 'warning',
						duration: 2500
					});
				}
			},
			//去掉时间中的T
			formateData(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].CreateTime.indexOf("T");
					var index2 = array[i].UpdateTime.indexOf("T");
					array[i].CreateTime = array[i].CreateTime.substring(0, index1) + " " + array[i].CreateTime.substring(index1 + 1, index1 + 9);
					array[i].UpdateTime = array[i].UpdateTime.substring(0, index2) + " " + array[i].UpdateTime.substring(index2 + 1, index2 + 9);
				}
			},
			//刷新
			reloadDatas() {
				this.isReload = true;
				this.getDatas();
			},
			//查询数据
			getDatas() {
				this.loading = true;
				var param = {
					readerkeyid: this.templateObj.keyid,
					flag: 1, //1查询读者绑定的，2查询读者未绑定的
					index: this.currentPage,
					pagesize: this.pageSize
				}
				HttpServer.httpPost.call(this, '/Api/LibraryLocation/locationByReader', param, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						this.formateData(response.data.info);
						this.tableData = response.data.info;
						this.totalSize = response.data.total;
						if(this.isReload) {
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					this.isReload = false;
				});
			}
		},
		created() {
			// console.log('this.templateObj',this.templateObj)
			this.getDatas();
		}
	}
</script>
<style scoped lang="less">
	.name {
		color: #20a0ff;
	}
	
	.el-date-editor.el-input {
		width: 130px;
	}
	
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
	
	._detail {
		width: 100%;
		display: block;
		margin-top: 15px;
		padding-bottom: 10px;
		border: 1px solid #E0E0E0;
		border-radius: 5px;
		.area-header {
			text-align: center;
			font-weight: bold;
			background-color: rgba(32, 159, 255, 0.2);
			border-color: rgba(32, 159, 255, 0.2);
			color: #20a0ff;
			padding: 5px;
			margin-bottom: 5px;
			border-radius: 5px;
		}
		.section:last-child {
			// margin-bottom:20px;
		}
	}
</style>